<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      :to="{ path: item.path }"
      v-for="item in breadcrumbs"
      :key="item.name"
      >{{ item.meta.title }}</el-breadcrumb-item
    >
    <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
  </el-breadcrumb>
  <el-button type="primary" @click="add">主要按钮</el-button><br />
  <span>{{ count }}</span
  ><br />
  <el-button type="primary" @click="countAdd">store</el-button><br />
  <span>{{ storeCount }}</span
  ><br />
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-cartfill"></use>
  </svg>
  <div style="height: 900px">
    <input id="myInput" type="text" @keydown="showMsg" />
    <el-button type="primary" @click="triggerEnter">store</el-button><br />
    <el-button type="primary" @click="countAdd">store</el-button>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "Test",
  setup: () => {
    const count = ref(0);
    const store = useStore();
    const storeCount = computed(() => store.state.count);
    const add = () => {
      count.value++;
    };
    const router = useRouter();
    const route = useRoute();
    const showMsg = (e: KeyboardEvent) => {
      if (e.key === "Enter") {
        ElMessage("this is a message.");
      }
    };
    const triggerEnter = () => {
     const inp = document.querySelector('#myInput')
const event = new KeyboardEvent('keydown',{key:'Enter'})

inp&&inp.dispatchEvent(event)
    };
    console.log(router, route.matched);
    return {
      count,
      add,
      showMsg,
      storeCount,
      countAdd: () => store.commit("increment"),
      breadcrumbs: route.matched.slice(0, -1),
      triggerEnter,
    };
  },
});
</script>

<style lang="scss"></style>
